import React from 'react';
import './index.less';
import {render} from 'ader';
import {Select, Input} from 'antd';
import StyleSettingAction from '@/actions/styleSetting';

const {Option} = Select;


export default render({
    actions: {
        ssA: StyleSettingAction
    },
    models: ['page']
})(({props, state, action}) => {

    const {page} = props;
    const {selectContainer, styleSetting, componentsMap, propsSetting} = page;
    if (!selectContainer) {
        return null;
    }
    const componentConfig = componentsMap[selectContainer.type][selectContainer.path];

    let optionList = action.ssA.makeAreasList({...selectContainer.props});

    return (
        <div className="style-setting-draw">
            <h3>样式设置</h3>
            {componentConfig.style.map((item, index) => {
                if (item.type === 'select') {
                    return (
                        <span 
                            className="style-item"
                            key={'select_' + index}
                        >
                            <label>{item.name}：</label>
                            <Select
                                onChange={action.ssA.changeStyle(item.field)}
                                className="style-select"
                                // value={selectContainer && styleSetting[selectContainer.id] ? styleSetting[selectContainer.id][item.field] : (item.default || '')}
                            >
                                {item.options.map((option, index) => {
                                    return (
                                        <Option
                                            value={option.value}
                                            key={'option_' + index}
                                        >
                                            {option.label}
                                        </Option>
                                    );
                                })}
                            </Select>
                        </span>
                    );
                }
                else if (item.type === 'input') {
                    return (
                        <span
                            className="style-item"
                            key={'style_input_' + index}
                        >
                            <label>{item.name}：</label>
                            <Input
                                // value={selectContainer && styleSetting[selectContainer.id] ? styleSetting[selectContainer.id][item.field] : (item.default || '')}
                                onChange={action.ssA.changeStyle(item.field)}
                            />
                        </span>
                    );
                }
            })}
            <h3>属性设置</h3>
            {componentConfig.props.map((item, index) => {
                if (item.type === 'input') {
                    return (
                        <span 
                            className="style-item"
                            key={'input_' + index}
                        >
                            <label>{item.name}：</label>
                            <Input 
                                onChange={action.ssA.changeProps(item.field)}
                                // value={selectContainer && propsSetting[selectContainer.id] ? propsSetting[selectContainer.id][item.field] : (item.default || '')}
                            />  
                            <span>{item.description}</span>
                        </span>
                    );
                } else if (item.type === 'areaSetting' && componentConfig.areas === 'table') {
                    return (
                        <span 
                            className="style-item"
                            key={'input_' + index}
                        >
                            <label>{item.name}：</label>
                            <Input.Group compact>
                                <Select
                                    style={{
                                        width: '80px'
                                    }}
                                    onChange={action.ssA.setCellProps(item.field, 'cellIndex')}
                                >
                                    {optionList.map((item, index) => {
                                        return (
                                            <Option
                                                value={item.value}
                                                key={index}
                                            >
                                                {item.label}
                                            </Option>
                                        );
                                    })}
                                </Select>
                                <Input 
                                    style={{
                                        width: '220px'
                                    }}
                                    onChange={action.ssA.setCellProps(item.field, 'cellProps')}
                                />
                            </Input.Group>  
                            <span>{item.description}</span>
                        </span>
                    );
                }
            })}
        </div>
    );
});